<template>
    <div class="swiper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="swiper in swiperList" :key="swiper.id">
          <img :src="swiper.imgUrl" :alt="swiper.alt">
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
    export default {
        props:["swiperList"],
      data(){
        return{
          swiperOption:{
            pagination: {
              el: '.swiper-pagination'
            },
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: false,
            }
          },
          
        }
      }
    }
</script>

<style scoped>
  .swiper{
    width: 100%;
    height: 0;
    background-color: #eee;
    padding-bottom: 26.67%;
  }
  .swiper img{
    width: 100%;
    height: 100%;
  }
  .swiper >>> .swiper-pagination-bullet-active {
    background: #fff;
  }
</style>
